// 折线图组件
<template>
  <v-chart :options="options" :autoresize="true" />
</template>

<script>
import { toThousands } from '@/utils/tool'
export default {
  components: {},
  props: {
    xAxisData: {
      type: Array,
      default: function() {
        return []
      }
    },
    seriesData: {
      type: Array,
      default: function() {
        return []
      }
    },
    seriesName: {
      type: String,
      default: '评论'
    },
    interval: {
      type: Number,
      default: 0
    },
    showArticleName: {
      type: Boolean,
      default: false
    }, // 悬浮窗是否显示作品名
    articleNameList: {
      type: Array,
      default() {
        return []
      }
    },
  },
  inject: {
    platName: {
      type: String,
      default: '',
    }
  },
  data() {
    return {
      options: {},
      platNameTheme: {
        'douyin': ['#667ED2', '#667ED2', '#667ED2'],
        'ks': ['#F55A59', '#FCD7D1', '#FDEDE0'],
        'redBook': ['#F55A59', '#FCD7D1', '#FDEDE0'],
        'wechat': ['#5DDAAA', '#5DDAAA', '#62FEA2'],
        'weibo': ['#F55A59', '#FCD7D1', '#FDEDE0'],
      }, // 各平台的主题色
    }
  },
  watch: {
    seriesData: function (newVal) {
      this.options.series.data = newVal
      this.initLineOptions()
    },
    seriesName: function(newVal) {
      this.options.series.name = newVal
    },
    xAxisData: function(newVal) {
      this.options.xAxis.data = []
      newVal.forEach(item => {
        this.options.xAxis.data.push(item.substr(5))
      })
    }
  },
  created() {
    },
  mounted() {
    this.initLineOptions()
  },
  methods: {
    initLineOptions() {
      let _this = this
      let _xAxisDataNoYear = []
      _this.xAxisData.forEach(item => {
        _xAxisDataNoYear.push(item.substr(5))
      })
      _this.options = {
        color: [_this.platNameTheme[_this.platName][0]],
        tooltip: {
          trigger: 'axis',
          show: true,
          confine: true, // 将浮层限制在屏幕内
          enterable: true,
          triggerOn: 'mousemove|click',
          backgroundColor: 'rgba(255,255,255,.8)',
          borderColor: '#CCCCCC',
          borderWidth: 1,
          textStyle: {
            color: '#666',
            fontSize: '10',
          },
          formatter: function(params) {
            var relVal = params[0].name;
            var dataIndex = params[0].dataIndex;
            if (_this.showArticleName) {
              relVal = _this.formatText(_this.articleNameList[dataIndex]) + '<br/>' + _this.xAxisData[dataIndex] + '<br/>' + params[0].seriesName + '：' + toThousands(params[0].value)
            } else {
              relVal = _this.xAxisData[dataIndex] + '<br/>' + params[0].seriesName + '：' + toThousands(params[0].value)
            }
            return relVal
          }
        },
        grid: {
          top: '10',
          left: '0',
          bottom: '0',
          right: '0',
          width: '95%',
          // height: '95%',
          containLabel: true,
        },
        xAxis: {
          data: _xAxisDataNoYear,
          show: true,
          boundaryGap: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#EEEEEE',
              opacity: .4,
              width: 1,
            },
          },
          axisLabel: {
            show: true,
            color: '#CCCCCC',
            fontSize: 10,
            interval: _this.interval,
            // rotate: 45
          },
          axisPointer: {
            lineStyle: {
              color: this.platNameTheme[this.platName][0],
              width: 1,
            }
          },
        },
        yAxis: {
          show: true,
          axisLabel: {
            // formatter: '{value}' + this.yAxisUnit,
            show: true,
            color: '#CCCCCC',
            fontSize: 10
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#EEEEEE',
              opacity: .4,
              width: 1,
            },
          },
          splitLine: {
            show: false
          }
        },
        series: {
          name: this.seriesName,
          data: this.seriesData,
          type: 'line',
          lineStyle: {
            width: 1,
            color: this.platNameTheme[this.platName][0]
          },
          areaStyle: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: this.platNameTheme[this.platName][1]
              }, {
                offset: 1, color: this.platNameTheme[this.platName][2]
              }],
            }
          },
        },
      }
    },
    // 作品名称超过7位省略
    formatText(text) {
      var _text = text
      if (text.length > 7) {
        _text = text.substr(0, 7) + '...'
      }
      return _text
    },
  },
};
</script>
<style>
/**
 * 默认尺寸为 600px×400px，如果想让图表响应尺寸变化，可以像下面这样
 * 把尺寸设为百分比值（同时请记得为容器设置尺寸）。
 */
.echarts {
  width: 100%;
  height: 100%;
}
</style>
<style scoped lang="less"></style>
